<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

</head>

<body class="yui-skin-sam">
<h1>Custom Cell Formatting</h1>
<div id="formatting"></div>

<script type="text/javascript">
// Global init var to run Loader only once
var gRunInit = true;
var gRunDataTable = true;
YAHOO_config = {
    load: {
        require: ['yahoo'],
        base: '../../build/',
        onLoadComplete: function(loader) {
            if(gRunInit) {
                gRunInit = false;
                
                YAHOO.example.checkData = function(name, loaderCallback) {
                    if (YAHOO.example.Data) {
                        loaderCallback();
                    } else {
                        setTimeout(function() {
                                YAHOO.example.checkData(name, loaderCallback);
                            }, 3);
                    }
                };

                loader.addModule({
                    name: "data",
                    type: "js",
                    fullpath: "assets/js/data.js",
                    verifier: YAHOO.example.checkData
                });

                loader.require("fonts", "data", "datatable");
                
                loader.onLoadComplete = function(loader) {
                    if(gRunDataTable) {
                        gRunDataTable = false;
                        
                        YAHOO.example.CustomFormatting = new function() {
                            // Define a custom formatter for the Column labeled "flag"
                            // draws an up icon if value of field3 is greater than 100,
                            // otherwise renders a down icon
                            this.myCustomFormatter = function(elCell, oRecord, oColumn, oData) {
                                YAHOO.util.Dom.addClass(elCell, "flag");
                                if(oRecord.getData("field3") > 100) {
                                    elCell.innerHTML = '&nbsp;<img src="../../build/datatable/assets/skins/sam/dt-arrow-up.png">';
                                }
                                else {
                                    elCell.innerHTML = '&nbsp;<img src="../../build/datatable/assets/skins/sam/dt-arrow-dn.png">';
                                }
                            };

                            // Override the built-in formatter
                            YAHOO.widget.Column.formatEmail = function(elCell, oRecord, oColumn, oData) {
                                var user = oData;
                                elCell.innerHTML = "<a href=\"mailto:" + user + "@mycompany.com\">" + user + "</a>";
                            };

                            var myColumnDefs = [
                                {label:"flag", formatter:this.myCustomFormatter}, // use custom formatter
                                {label:"radio", formatter:YAHOO.widget.DataTable.formatRadio}, // use the built-in radio formatter
                                {label:"check", formatter:YAHOO.widget.DataTable.formatCheckbox}, // use the built-in checkbox formatter
                                {label:"button", formatter:YAHOO.widget.DataTable.formatButton}, // use the built-in button formatter
                                {key:"field1", sortable:true},
                                {key:"field2", sortable:true, formatter:YAHOO.widget.DataTable.formatDate}, // use the built-in date formatter
                                {key:"field3", sortable:true},
                                {key:"field4", sortable:true, formatter:YAHOO.widget.DataTable.formatCurrency}, // use the built-in currency formatter
                                {key:"field5", sortable:true, formatter:YAHOO.widget.DataTable.formatEmail}, // use the overridden email formatter
                                {key:"field6", sortable:true, formatter:YAHOO.widget.DataTable.formatLink} // use the built-in link formatter
                            ];

                            this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.formatting);
                            this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
                            this.myDataSource.responseSchema = {
                                resultsList: ["items"],
                                // Use the parse methods to populate the RecordSet with the right data types
                                fields: [
                                    {key:"field1", parser:YAHOO.util.DataSource.parseString}, // point to the string parser
                                    {key:"field2", parser:YAHOO.util.DataSource.parseDate}, // point to the date parser
                                    {key:"field3", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser
                                    {key:"field4", parser:YAHOO.util.DataSource.parseNumber}, // point to the number parser
                                    {key:"field5"}, // this is already string data so no parser needed
                                    {key:"field6"} // this is already string data so no parser needed
                                ]
                            };

                            this.myDataTable = new YAHOO.widget.DataTable("formatting", myColumnDefs, this.myDataSource);

                            this.myDataTable.subscribe("radioClickEvent", function(oArgs){
                                var elRadio = oArgs.target;
                                var elRecord = this.getRecord(elRadio);
                                var name = elRecord.getData("field5");
                                alert("The radio button for " + name + " was selected");
                            });

                            this.myDataTable.subscribe("checkboxClickEvent", function(oArgs){
                                var elCheckbox = oArgs.target;
                                var elRecord = this.getRecord(elCheckbox);
                                var name = elRecord.getData("field5");
                                alert("Checkbox was " + (elCheckbox.checked ? "" : "un") + "checked for " + name);
                            });

                            this.myDataTable.subscribe("buttonClickEvent", function(oArgs){
                                var oRecord = this.getRecord(oArgs.target);
                                alert(YAHOO.lang.dump(oRecord.getData()));
                            });
                        };
                    }
                }
                
                loader.insert();
            }
        }
    }
};

</script>
<script type="text/javascript" src="../../build/yuiloader/yuiloader-beta.js"></script>
</body>
</html>
